import { Form, Input, ResponsiveGrid } from '@alifd/next';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import React from 'react';

const { Cell } = ResponsiveGrid;

const SurchargesFieldsGrid = (props) => {
  const { dataSource, merchantIncludeSurKey = [] } = props;
  const keys = Object.keys(dataSource);
  const fields = keys.reduce((res, key) => {
    const { selectable, checked } = dataSource[key];
    const tmp = {
      title: t`${key}`,
      price: dataSource[key].RMB,
    };
    if (selectable) {
      if (checked) {
        res.push(tmp);
      }
    } else {
      res.push(tmp);
    }
    return res;
  }, []);

  return (
    <ResponsiveGrid gap={[0, 24]} columns={4} >
      {fields.length === 0 ?
        <Cell colSpan={4} >
          <Form.Item label={t`附加费`} style={{ width: '100%' }} >
            <Input value={t`无`} />
          </Form.Item>
        </Cell>
        :
        <>
          {fields.map(({ title, price }) => {
            let text = `¥${price}`;
            if (merchantIncludeSurKey.includes(title)) {
              text = '附加费已包含基础价格内';
            }
            return (
              <Cell colSpan={1}>
                <Form.Item
                  mode="view"
                  label={title}
                  style={{ width: '100%' }}
                >
                  <Input value={t`${text}`} />
                </Form.Item>
              </Cell>
            );
          })}
        </>
      }
    </ResponsiveGrid>
  );
};

export default observer(SurchargesFieldsGrid);
